<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle @close="close" title="下发任务"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px">
      <div class="infobox myform">
        <a-row>
          <a-col :span="24">
            <div style="display: flex; align-items: center">
              <div class="label">任务类型{{ appear_type }}</div>
              <div style="flex: 1">
                <a-select style="width: 100%" v-model:value="appear_type" size="small" placeholder="选择数据类型">
                  <a-select-option :value="item.id" v-for="(item, index) in renwuType" :key="index">{{ item.name }}</a-select-option>
                </a-select>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div style="display: flex; margin-top: 10px">
              <div class="label">任务标题</div>
              <div style="flex: 1">
                <a-input style="width: 100%" v-model:value="title" placeholder="输入任务标题" size="small" />
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div style="display: flex; margin-top: 10px">
              <div class="label">任务内容</div>
              <div style="flex: 1">
                <a-textarea style="width: 100%" v-model:value="content" placeholder="输入任务内容" size="small" />
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <div class="label">任务地点</div>
              <div style="flex: 1">
                <a-input style="width: 100%" v-model:value="event_address" placeholder="输入任务地点" size="small" />
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <div class="label">联系人</div>
              <div style="flex: 1">
                <a-input style="width: 100%" v-model:value="name" placeholder="输入联系人" size="small" />
              </div>
            </div>
          </a-col>
          <a-col :span="12">
            <div style="display: flex; align-items: center; margin-top: 10px">
              <div class="label" style="text-align: center">联系电话</div>
              <div style="flex: 1">
                <a-input style="width: 100%" v-model:value="phone" placeholder="输入联系电话" size="small" />
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="infobox" style="margin: 10px 0">
        <div style="display: flex">
          <div class="label">下发人员</div>
          <div
            style="
              height: 200px;
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              overflow-y: auto;
              scrollbar-width: none;
              -ms-overflow-style: none;
              flex: 1;
            "
          >
            <div class="item" v-for="(item, i) in renyuanList" :key="i">
              <div
                style="
                  width: 30px;
                  height: 30px;
                  background-size: 30px 30px;
                  background-image: url(&quot;/img/myimg/avatar.png&quot;);
                  border-radius: 50%;
                "
              ></div>
              <div style="margin-left: 5px; flex: 1; width: 0" class="ellipsis">{{ item.name }}</div>
              <a-checkbox v-model:checked="item.checked" @change="handleChange($event, i)"></a-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; align-items: center; justify-content: center">
        <div class="btn" @click="handleQueren">确认下发</div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import { message } from "ant-design-vue"
import $api from "@/utils/request.js"
// import { UserOutlined } from '@ant-design/icons-vue'
const tfsjItem = ref({})
const renyuanList = ref([])
const renwuType = ref([])
const appear_type = ref("")
const event_address = ref("")
const content = ref("")
const title = ref("")
const name = ref("")
const phone = ref("")
const list = ref([
  {
    checked: true,
    name: "刘莉"
  },
  {
    checked: false,
    name: "王娜"
  },
  {
    checked: false,
    name: "周伟"
  },
  {
    checked: true,
    name: "魏佳昊"
  },
  {
    checked: false,
    name: "林勇"
  },
  {
    checked: false,
    name: "陈燕"
  },
  {
    checked: false,
    name: "熊天强"
  }
])

const modalShow = ref(false)

const emit = defineEmits(["xfrw", "close"])
const xfrw = () => {
  emit("xfrw")
}
const handleChange = (e, index) => {
  console.log(e, index)
  // eslint-disable-next-line array-callback-return
  renyuanList.value.map((v, i) => {
    if (i === index) {
      v.checked = e.target.checked
    } else {
      v.checked = false
    }
  })
  console.log("人员列表：", renyuanList.value)
}
const handleQueren = async () => {
  let organization_id = ""
  // eslint-disable-next-line array-callback-return
  renyuanList.value.map((v, i) => {
    if (v.checked) {
      organization_id = v.id
    }
  })
  if (appear_type.value === "") {
    return message.error("请选择任务类型")
  }
  if (title.value === "") {
    return message.error("请输入标题")
  }
  if (event_address.value === "") {
    return message.error("请输入地点")
  }
  if (content.value === "") {
    return message.error("请输入任务内容")
  }
  if (name.value === "") {
    return message.error("请输入联系人")
  }
  if (phone.value === "") {
    return message.error("请输入联系人电话")
  }
  if (organization_id === "") {
    return message.error("请选择下发人员")
  }
  const typeName = renwuType.value.find((item) => item.id === appear_type.value).name
  const res = await $api.get("api/index/setAppeal", {
    type: 2,
    appear_type: typeName,
    appear_type_id: appear_type.value,
    event_address: event_address.value,
    content: content.value,
    name: name.value,
    phone: phone.value,
    organization_id,
    title: title.value
  })
  if (res.code === 1) {
    message.info("下发成功")
    modalShow.value = false
    emit("xfrw", tfsjItem.value)
  } else {
    message.error(res.msg)
  }
}
const close = () => {
  modalShow.value = false
  emit("close", tfsjItem.value)
}
const show = async (e) => {
  // 人员列表
  const res = await $api.get("api/index/wanggeyuan_list", { page: 1, pagesize: 1000 })
  // eslint-disable-next-line array-callback-return
  res.data.data.map((v, i) => {
    v.checked = false
  })
  renyuanList.value = res.data.data
  const response = await $api.get("api/index/get_appeal_little_type")
  console.log(response)
  renwuType.value = response.data
  console.log(renwuType.value)
  tfsjItem.value = e
  modalShow.value = true
}
defineExpose({ show, close })
</script>
<style>
.myform .ant-select:not(.ant-select-customize-input) .ant-select-selector {
  background: #00000066;
  border: 1px solid #57ffff80;
}
.myform .ant-select .ant-select-arrow {
  color: #57ffff;
}
.myform .ant-select-single.ant-select-sm .ant-select-selector {
  color: #fff;
  font-size: 12px;
}
.myform .ant-select .ant-select-selection-placeholder {
  color: #fff;
  font-size: 12px;
}
.myform .ant-select .ant-select-selection-search {
  color: #fff;
  font-size: 12px;
}
.ant-select-dropdown {
  background: #000000 !important;
  color: #fff;
}
.ant-select-dropdown .ant-select-item {
  color: #fff;
  font-size: 12px;
}
</style>
<style>
.myform .ant-input-sm {
  /* border-radius:20px; */
  padding: 2px 10px;
}
.myform .ant-input {
  background-color: #00000066;
  border: 1px solid #57ffff80;
  color: #ffffff;
  font-size: 12px;
}
.myform .ant-input::placeholder {
  color: #ffffff;
  font-size: 12px;
}
</style>
<style scoped lang="less">
.item {
  display: flex;
  align-items: center;
  width: 120px;
  margin-right: 20px;
  margin-bottom: 10px;
  background-color: #00000066;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
}
.infobox {
  background: #4ddecf1a;
  padding: 10px 16px;
  border: 1px solid #4ddecf33;
  border-radius: 10px;
  color: #ffffff;

  .label {
    font-size: 12px;
    width: 80px;
  }
}
.btn {
  background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
  border: 1px solid #57ffff;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px;
  border-radius: 99px;
  cursor: pointer;
  margin-bottom: 10px;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
